<template>
    <div class="category">
        <manage-head :search="search" :dialog-visible="dialogVisible" :update="update" @setDialogVisible="setDialogVisible"
            @clearData="clearData" @setUpdate="setUpdate"></manage-head>
        <el-table :data="categoryList" style="width: 100%">
            <el-table-column prop="name" label="店铺名称">
            </el-table-column>
            <el-table-column prop="categories" label="分类名称">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="form-box">
                <div class="form">
                    <div>店铺</div>
                    <el-select v-model="category.storeId" placeholder="请选择">
                        <el-option v-for="item in storeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="form">
                    <div>分类名称</div>
                    <el-input v-model="category.categories" placeholder="请输入分类名"></el-input>

                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import CATEGORY_API from '@/api/category'
import ManageHead from '@/components/manage/ManageHead.vue'
export default {
    components: {
        ManageHead
    },
    data() {
        return {
            categoryList: [],
            storeList: [

            ],
            category: {
                "id": "",
                "storeId": "",
                "categories": "",
                "sort": null,
                "createTime": "",
                "updateTime": "",
            },
            dialogVisible: false,

            search: '',
            update: '',
        }

    },
    created() {
        this.getCategoryList()
    },
    methods: {
        getCategoryList() {
            this.$axios.post(CATEGORY_API.GET_CATEGORY_LIST_BY_USERID)
                .then(res => {
                    if (res.code == 200) {
                        this.categoryList = []
                        this.storeList = []

                        let storeCategoriesList = res.data.storeCategoriesList

                        for (let i = 0; i < storeCategoriesList.length; i++) {
                            let categoryList = storeCategoriesList[i].storeCategories

                            let store = {}
                            store.label = storeCategoriesList[i].store.name
                            store.value = storeCategoriesList[i].store.id

                            this.storeList.push(store)

                            for (let j = 0; j < categoryList.length; j++) {
                                categoryList[j].name = storeCategoriesList[i].store.name
                            }
                            this.categoryList = this.categoryList.concat(categoryList)

                        }
                    } else this.$error(res.message)
                })
        },
        clearData() {
            this.category = {
                "id": "",
                "storeId": "",
                "categories": "",
                "sort": null,
                "createTime": "",
                "updateTime": "",
            }
        },
        edit(data) {
            this.dialogVisible = true
            this.update = 1
            this.category = { ...data }
        },
        del(data){
            delete data.name
            this.$axios.delete(CATEGORY_API.DELETE_CATEGORY, {data})
            .then(res => {
                if(res.code == 200){
                    this.getCategoryList()

                    this.$success(res.message)
                }else this.$error(res.message)
            })
        },
        confirm() {
            //添加
            if (this.update == 0) {
                let data = this.category
                delete data.name

                this.$axios.post(CATEGORY_API.ADD_CATEGORY, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getCategoryList()
                            this.dialogVisible = false
                        } else {
                            this.$error(res.message)
                        }
                    })
            }

            //修改
            else {
                let data = this.category
                delete data.name
                this.$axios.put(CATEGORY_API.UPDATE_CATEGORY, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getCategoryList()
                            this.dialogVisible = false
                        } else this.$error(res.message)
                    })
            }
        },
        setDialogVisible(val) {
            this.dialogVisible = val
        },
        setUpdate(val) {
            this.update = val
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>

<style scoped>
.form-box>div {
    margin: 20px 0;
}
</style>